<template>
  <!-- 下拉选择模板1 组合型 -->
  <a-input-group style="width:100%;" compact>
    <!-- a-select 和 a-dropdown 功能一致样式不同 推荐a-dropdown -->
    <a-select
      style="width: 42px;display:none"
      showSearch
      allowClear
      :disabled="disabled"
      :dropdownMatchSelectWidth="false"
      :filterOption="filterOption"
      :placeholder="placeholder"
      :value="seletedValue"
      @change="handleChange"
    >
      <a-select-option v-for="item in lists" :key="item.pid">
        {{ item.addr }}
      </a-select-option>
    </a-select>
    <a-input 
      style="width:calc( 100% - 42px )" 
      allowClear
      :disabled="disabled" 
      :placeholder="placeholder" 
      v-model="seletedValue" />
    <a-dropdown>
      <a-button style="width:42px" class="ant-dropdown-link" @click="e => e.preventDefault()">
        <a-icon type="dash" />
      </a-button>
      <a-menu slot="overlay" @click="handleMenuClick">
        <a-menu-item v-for="item in lists" :key="item.pid"> {{ item.addr }} ({{ item.contact }}) </a-menu-item>
      </a-menu>
    </a-dropdown>
  </a-input-group>
</template>

<script>
import { getSelectOptions } from './selectList'

export default {
  name: 'selectDemo1',
  props: {
    placeholder: {
      default: '请选择',
      required: false,
      type: String
    },
    disabled: {
      default: false,
      required: false,
      type: Boolean
    },
    value: {
      default: '',
      required: false,
      type: String
    }
  },
  data() {
    return {
      record: { addr: null },
      lists: [],
      seletedValue: this.value == '' || this.value === null ? undefined : this.value
    }
  },
  computed: {
    placeholderShow() {
      return this.placeholder
    }
  },
  created() {
    this.initDictData()
  },
  methods: {
    initDictData() {
      const pagination = {
        pageSize: 1000000,
        current: 1
      }
      const headers = {
        authOption: '1'
      }
      getSelectOptions({}, pagination, headers).then(r => {
        if (r && r && r.code === 'C1' && r.data) {
          console.log(r.data)
          this.lists = r.data
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    handleChange(val) {
      console.log(val, this.lists)
      let record = this.lists.find(item => {
        return item.pid == val
      })
      console.log(val, record)
      if (record) {
        this.record = record
        this.seletedValue = record.addr
      }

      // this.$emit('change', val, record)  
      this.$emit('change', record.addr, record)
    },
    handleMenuClick(val) {
      let record = this.lists.find(item => {
        return item.pid == val.key
      })
      console.log(val, record)
      if (record) {
        this.record = record
        this.seletedValue = record.addr
      }

      // this.$emit('change', val.key, record)
      this.$emit('change', record.addr, record)
    }
  },
  watch: {
    value: function() {
      this.seletedValue = this.value == '' || this.value === null ? undefined : this.value
    },
    seletedValue(val) {
      let re = JSON.parse(JSON.stringify(this.record))
      re.addr = val
      this.$emit('change', val, re)
    }
  }
}
</script>
